<template>
	<view class="bg-light" style="height: 100%;">
		<view class="flex pb-2" style="height: 50rpx;">
			<view v-for="(item, index) in tabs" :key="index" class="w-100 flex align-end justify-center" 
				style="cursor: pointer;height: 50rpx;" @click="changeTab(item,index)">
				<text :class="activeTab === index?'font-md font-weight-bold':'font'">{{ item.name }}</text>
			</view>
		</view>
		<scroll-view @scrolltolower="onReachScollBottom" scroll-y="true" class="w-100" :style="'height:calc(100vh - 70rpx) '">
			<view class="mx-2 py-2">
				<view v-for="(i,id) in tableData" :key="i.Sales_Order_SerialNumber" class="bg-white flex flex-column py-2 rounded-lg mb-2">
					<view @click="handle(i)" class="mx-2 flex justify-between align-center">
						<view class="flex align-center" style="width: 75%;">
							<text class="font font-weight-bold text-ellipsis-1">{{i.Sales_Order_SerialNumber}}</text>
							<uni-icons type="right" size="15" class="flex align-center"></uni-icons>
						</view>
						<view class="font flex-shrink text-success" :class="Type(i)[1]">{{Type(i)[0]}}</view>
					</view>
					<!-- 商品 -->
					<view @click="handle(i)" v-for="(item,index) in i.Children.sales_order_detail.filter((it,id)=>i.isExpand?id==0:true)" :key="index" class="flex justify-between mt-2 mx-2">
						<image v-if="BASE_IMG" :src="BASE_IMG+item.Picture_URL" style="width: 180rpx;height: 180rpx;"
							class="rounded-lg flex-shrink shadow mr-2">
						</image>
						<view class="flex justify-between w-100">
							<view>
								<view class="font font-weight-bold text-ellipsis">{{item.Article_Name}}</view>
								<view class="mt-1 font text-muted">{{item.Specifications_Name}}</view>
							</view>
							<view class="flex-shrink flex flex-column align-end">
								<view class="font-sm font-weight-bold">{{Amount(item)}}</view>
								<view class="mt-1 font-sm text-muted">
									×{{item.Quantity}}
								</view>
							</view>
						</view>
					</view>
					<view class="w-100 flex justify-center mt-1" v-if="i.Children.sales_order_detail.length>1&&i.isExpand">
						<text @click="handleExpand(i)" class="font-sm text-success">可查看更多</text>
					</view>
					<!-- 操作 -->
					<view class="mx-2 flex flex-column align-end mt-2">
						<text class="font-sm">共付款{{Amount(Total(i.Children.sales_order_detail))}}</text> 
						<view class="flex mt-2">
							<view @click="handleExpand(i)" v-if="i.Children.sales_order_detail.length>1" class="flex justify-center align-center rounded-circle border border-muted" style="width: 160rpx; height: 55rpx;">
								<text class="font-sm text-muted">{{i.isExpand?'查看全部':'隐藏'}}</text> 
							</view>
							<view @click="handlesubmit('remove',i)" v-if="i.Row_Status.charAt(1)=='6'" class="ml-2 flex justify-center align-center rounded-circle border border-muted" style="width: 160rpx; height: 55rpx;">
								<text class="font-sm text-muted">删除订单</text> 
							</view>
							<view @click="handlesubmit('pay',i)" v-if="i.Row_Status.charAt(1)=='2'" 
								class="ml-2 flex justify-center align-center rounded-circle border border-success" style="width: 160rpx; height: 55rpx;">
								<text class="text-success font-sm">继续支付</text>
							</view>
							<view @click="handlesubmit('cancel',i)" v-if="i.Row_Status.charAt(1)=='2'"
								class="ml-2 flex justify-center align-center rounded-circle border  border-muted" style="width: 160rpx; height: 55rpx;">
								<text class="text-muted font-sm">取消订单</text>
							</view>
							<!-- <view @click="handlesubmit('buy',i)" v-if="i.Row_Status.charAt(0)=='0'&&(i.Row_Status.charAt(1)=='3' || i.Row_Status.charAt(1)=='4')" 
								class="ml-2 flex justify-center align-center rounded-circle border border-danger" style="width: 160rpx; height: 55rpx;">
								<text class="font-sm text-danger">再买一单</text> 
							</view>
							<view @click="handlesubmit('cart',i)" v-else-if="i.Row_Status.charAt(0)=='1'&&(i.Row_Status.charAt(1)=='3' || i.Row_Status.charAt(1)=='4')"
								 class="ml-2 flex justify-center align-center rounded-circle border border-danger" style="width: 160rpx; height: 55rpx;">
								<text class="font-sm text-danger">加入购物车</text> 
							</view> -->
						</view>
					</view>
				</view>
				<view v-if="tableData.length == 0" class="flex justify-center">
					<image style="width: 100%;" src="../../static/icon/NoneOrder.png" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import {getUserSalesOrderList} from '@/api/salerOrder.js'
	import { accAdd,accMul } from '@/static/js/GeneralUtil.js'
	import money from "@/components/tool/money.vue";
	import { mixins } from "./js/order.js"
	export default {
		mixins:[mixins],
		data() {
			return {
				tabs: [{
					name:"全部",
					type:""
				}, {
					name:"待付款",
					type:"2"
				}, {
					name:"待发货",
					type:"3"
				}, {
					name:"待收货",
					type:"4"
				}],
				activeTab:'',
				form:{
					PageNubmer:1,
					RowAmount:10,
					Status:''
				},
				total:0,
				tableData:[],
				isReach:true,//是否有剩余数据
			}
		},
		onLoad(options){
			//初始化
			this.form.Status = options.Status
			for(let i = 0; i < this.tabs.length; i ++){
				if(this.tabs[i].type == options.Status){
					this.activeTab = i;
					break;
				}
			}
			this.getData(this.form)
		},
		computed:{
			...mapState(['Open_ID','App_ID','BASE_IMG']),
			Type() {
			    return function (row) {
					//1个订单  多个明细  每个明细可以退多次   全额 可退数量 0 
			        if (row.Children.sales_order_detail.filter(i=>parseInt(i.Refundable_Quantity)==0).length == row.Children.sales_order_detail.length) {
			            return ["已退款", "text-muted"]
			        } else if (row.Children.sales_order_detail.some(i=>parseInt(i.Refunded_Quantity) > 0)){//只要有 i.Refunded_Quantity > 0  
						return ["部分退款", "text-warning"]
					} else {
			            let str = row.Row_Status;
			            switch (str.charAt(1)) {
			                case "0":
			                    return ["待付款", ""];
			                case "1":
			                    return ["待付款", ""];
			                case "2":
			                    return ["待付款", ""];
			                case "3":
			                  return   ["已付款", "text-success"];
			                case "4":
			                    return ["已发货", "text-warning"];
			                case "5":
			                    return ["已收货", "text-danger"];
			                case "6":
			                    return ["已取消", ""];
			                case "7":
			                    return ["已取消", ""];
			                default:
			                    return ""
			            }
			        }
			    }
			},
			Amount() {
			    return function (row) {
			        let Sales_Point = row.Sales_Point == '0' ? '' : row.Sales_Point + '积分';
			        let i = row.Sales_Point != '0' && row.Reality_Amount != 0 ? '+' : ''
			        let Reality_Amount = row.Reality_Amount == '0' ? '' : row.Reality_Amount + '元'
			        return Sales_Point + i + Reality_Amount
			    }
			},
			Total(){
				return function (arr){
					let Sales_Point = 0;
					let Reality_Amount = 0;
					arr.forEach(item=>{
						Sales_Point = accAdd(Sales_Point,item.Sales_Point);
						Reality_Amount = accAdd(Reality_Amount,item.Reality_Amount);
					})
					return {Sales_Point,Reality_Amount}
				}
			}
		},
		methods: {
			handleExpand(item){
				item.isExpand = !item.isExpand
			},
			onReachScollBottom(){
				if(this.isReach){//是否有剩余数据
					if (this.tableData.length < this.total) {
						this.form.PageNubmer++;
						this.getData(this.form,true)
					} else {
						this.isReach = false;
					}
				}
			},
			async getData(form,  onReach = false){
				if(!this.loading){
					this.loading = true;
					uni.showLoading({
						title: "加载中...",
					});
					if(!onReach) {
						this.form.PageNubmer = 1
						this.tableData = [];
					}
					let data = await getUserSalesOrderList({...form,Open_ID:this.Open_ID})
					//判断是否重新开始查询
					data.Rows.forEach(item=>{
						item.isExpand = true;
					})
					this.total = parseInt(data.Total);
					this.tableData.push(...data.Rows);
					uni.hideLoading();
					this.loading = false;
				}
			},
			changeTab(item,index){
				this.activeTab = index;
				this.isReach = true;
				this.form.Status = item.type;
				this.getData(this.form);
			},
			handle(item){
				// encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url:'/pages/my/myOrderDetail?salesOrder='+item.Sales_Order_SerialNumber, 
				})
			}
		}
	}
</script>

<style>

</style>
